<template>
  <div class="topNav" v-if="$store.state.isNav">
    <div
      class="topLeft"
      @click="
        show = true;
        $store.state.user.userID &&
          $store.dispatch('user/getUser', $store.state.user.userID);
      "
    >
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-caidan"></use>
      </svg>
    </div>
    <!-- 头部菜单 -->
    <van-popup
      v-model:show="show"
      position="left"
      :style="{
        height: '100%',
        width: '70%',
        padding: '0.2rem',
        backgroundColor: 'rgba(0,0,0,0.5)',
      }"
    >
      <!-- 菜单头部 -->
      <div class="menuTop" v-if="userToken">
        <img :src="profile.avatarUrl" alt="" />
        <span>{{ profile.nickname }}</span>
      </div>
      <div style="color: red; margin-left: 0.2rem" v-else>
        emo啦？快上号帮你摆脱emo！
      </div>
      <!-- VIP -->
      <div class="menuVip">
        <div class="vipUp">
          <span style="color: #fff">黑胶VIP</span>
          <i>会员中心</i>
        </div>
        <div style="margin: 0 0 0.2rem 0.1rem">
          受邀专享，黑胶VIP仅0.29元/天!
        </div>
      </div>
      <!-- 导航 -->
      <div class="menuNav">
        <ul>
          <li>菜单1</li>
          <li>菜单2</li>
        </ul>
      </div>
      <!-- 退出登录 -->
      <div class="logout" @click="Logout" v-if="userToken">退出登录</div>
      <!-- 去登陆 -->
      <div class="logout" @click="Login" v-else>去登录</div>
    </van-popup>
    <div class="topContent">
      <span :class="{ active: flag == 0 }" @click="flag = 0">我的</span>
      <span :class="{ active: flag == 1 }" @click="flag = 1">发现</span>
      <span @click="flag = 2" :class="{ active: flag == 2 }">云村</span>
      <span @click="flag = 3" :class="{ active: flag == 3 }">视频</span>
    </div>
    <div class="topRight" @click="$router.push('/search')">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { computed, watch, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  setup() {
    //vue-router
    let router = useRouter();
    //vuex
    let { state, dispatch } = useStore();
    //数据
    let states = reactive({
      show: false,
      flag: 1,
      profile: computed(() => state.user.userInfo.profile || {}),
      userToken: computed(() => state.user.token),
    });

    //方法 退出登录
    function Logout() {
      dispatch("user/userLogout");
      states.flag = 1;
      states.show = false;
    }

    //方法 去登陆 跳转登录页面
    function Login() {
      router.push("/userLogin");
      states.flag = 0;
      states.show = false;
    }

    //检测flag
    watch(
      () => states.flag,
      (newv) => {
        //当flag=0时 登录(userCenter) 未登录(userLogin)
        newv == 0 && router.push("/userCenter");
        //当flag=1时 路由跳转
        newv == 1 && router.push("/foundMusic");
      },
      { immediate: true }
    );

    return {
      ...toRefs(states),
      Logout,
      Login,
    };
  },
};
</script>

<style lang="less" scoped>
.topNav {
  width: 100%;
  height: 1rem;
  padding: 0.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .menuTop {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
    }
    span {
      margin-left: 0.2rem;
      color: #fff;
    }
  }
  .menuVip {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(
      to bottom right,
      black,
      rgb(122, 118, 118)
    );
    margin: 0.4rem 0.1rem 0 0.1rem;
    border-radius: 0.2rem;
    color: antiquewhite;
    .vipUp {
      display: flex;
      justify-content: space-between;
      margin: 0.2rem;
      i {
        font-style: normal;
        font-size: 0.2rem;
        border: 1px solid antiquewhite;
        border-radius: 0.2rem;
      }
    }
  }
  .menuNav {
    margin-top: 0.4rem;
    ul {
      width: 100%;
      height: 100%;
    }
    li {
      color: #fff;
      list-style: none;
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      margin: 0.04rem 0;
      padding-left: 0.1rem;
    }
    li:hover {
      background-color: rgba(120, 120, 120, 0.8);
    }
  }
  .logout {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    color: red;
    margin-top: 0.4rem;
    background-color: rgba(120, 120, 120, 0.8);
    text-align: center;
    border-radius: 0.4rem;
  }
  .topContent {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 0.36rem;
    .active {
      font-weight: 900;
    }
  }
}
</style>